<template>
    <div id="top-header">
        <div class="center-title">中央厨房物联网监控中心</div>
        <div class="weather">
            <div class="weather-detail">{{weatherInfo.weather}}</div>
            <div class="weather-temp">{{weatherInfo.temperature_float}}℃</div>
            <div class="wind-power">
                <span>{{weatherInfo.winddirection}}风</span>
                <span>{{weatherInfo.windpower}}级</span>
            </div>
            <div class="humidity">
                <span>空气湿度</span>
                <span>{{weatherInfo.humidity_float}}%</span>
            </div>
        </div>
        <div class="calendar">
            <div class="left-date">
                <span class="big-date">{{bigDate}}</span>
                <span class="week">{{weekDay}}</span>
            </div>
            <div class="small-time">{{moreTime}}</div>
        </div>
    </div>
</template>

<script setup>
import { weather } from "../utlis/api"
import { ref,onMounted, onBeforeUnmount } from 'vue'

const city=ref('420500') //襄阳 420600
const apiKey=ref('a367fceaff4451fa6ff89e069ce505fb')
const extensions=ref('base')
const timer = ref()
const bigDate = ref("")//年月日
const moreTime = ref("")//时分秒
const weekDay=ref('') //星期
const weatherInfo=ref({
    weather:'',
    temperature_float:'',
    winddirection:'',
    windpower:'',
    humidity_float:''
})


onMounted(() => {
    //获取天气
    getWeather()
    //创建定时器1秒执行一次
    timer.value = setInterval(() => {
        formateDate()
    }, 1000)

})

//获取天气
const getWeather=async()=>{
    const data  = await weather(city.value,apiKey.value,extensions.value)
    console.log(data.data.lives[0])
    let lives=data.data.lives[0]
    weatherInfo.value=lives
}
//取消定时器
onBeforeUnmount(() => {
    clearInterval(timer.value) //清除定时器
})

//获取当前时间
const formateDate = () => {
    const time = new Date()
    const year = time.getFullYear()
    const month = complement(time.getMonth() + 1)
    const day = complement(time.getDate())
    const hour = complement(time.getHours())
    const minute = complement(time.getMinutes())
    const second = complement(time.getSeconds())
    const week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][time.getDay()]
    moreTime.value = `${hour}:${minute}:${second}`
    bigDate.value = `${year}年${month}月${day}日`
    weekDay.value=week
}
//当时间为个位数的时候，在数字前加0
const complement = (value)=> {
    return value < 10 ? `0${value}` : value.toString()
}

</script>

<style lang="less" scoped>
#top-header {
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    background: url('../components/img/header-bg.png') no-repeat;
    background-size: 100% 100%;
    transform: matrix(1, 0, 0, 1, 1, 0);
    transition-duration: 0ms;
    // .header-center-decoration {
    //     width: 50%;
    //     height: 60px;
    //     margin-top: 35px;
    // }

    // .header-left-decoration,
    // .header-right-decoration {
    //     width: 25%;
    //     height: 60px;
    // }

    .center-title {
        position: absolute;
        font-size: 30px;
        font-weight: bold;
        left: 50%;
        top: 15px;
        transform: translateX(-50%);
        background-image:-webkit-linear-gradient(bottom,#e6f2ff,#55bdff); 
        -webkit-background-clip:text; 
        -webkit-text-fill-color:transparent;
        letter-spacing:5px;
    }
    .weather{
        position: absolute;
        left: 1%;
        top: 35%;
        display:flex;
        align-items:center;
        font-size:20px;
        color:rgb(166, 203, 255);
        div{
            margin-right:10px;
        }
        .wind-power,.humidity{
            display:flex;
        }
    }
    .calendar{
        position: absolute;
        right:3%;
        top: 40%;
        display:flex;
        align-items:center;
        font-size:20px;
        color:rgb(166, 203, 255);
        .left-date{
            display:flex;
            align-items:flex-end;
            margin-right:15px;
        }
        .small-time{
            color:#fff
        }
    }

    .fullscreen {
        position: absolute;
        top: 8px;
        right: 30px;
        z-index: 100;
        color: #fff;
        cursor: pointer;
    }
}
</style>
